<template>
    <div class="prop-style-com">
        <div class="prop-style-title">{{ selections.mode == 0 ? $t('message.text.drawing') : $t('message.text.pel') }}</div>
        <div class="prop-style-body">
            <el-scrollbar ref="propStyleRef">
                <div class="prop-scroll-body">
                    <template v-if="selections.mode == 0">
                        <div class="prop-item">
                            <div class="prop-item-name">{{ $t('message.text.background') }}</div>
                            <div>
                                <jvs-color-picker pickerType="chrome" :color="option.background"
                                    @changeData="backGroundChange"></jvs-color-picker>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="prop-item">
                            <div class="prop-item-name">
                                <svg class="check-icon" @click="changeRule">
                                    <use
                                        v-bind:xlink:href="`#${option.rule ? 'keowledge-a-zu3739' : 'keowledge-a-juxing2862biankuang'}`">
                                    </use>
                                </svg>
                                <span>{{ $t('message.text.displayRuler') }}</span>
                            </div>
                            <div></div>
                        </div>
                        <div class="line"></div>
                        <div class="prop-item">
                            <div class="prop-item-name">
                                <svg class="check-icon" @click="changeGrid">
                                    <use
                                        v-bind:xlink:href="`#${option.grid ? 'keowledge-a-zu3739' : 'keowledge-a-juxing2862biankuang'}`">
                                    </use>
                                </svg>
                                <span>{{ $t('message.text.showGrid') }}</span>
                            </div>
                            <div></div>
                        </div>
                        <div class="prop-item">
                            <div class="prop-item-name">{{ $t('message.text.gridSize') }}</div>
                            <div class="prop-item-right">
                                <el-input-number style="width:100%;" v-model="option.gridSize" :min="1" size="small"
                                    controls-position="right" />
                            </div>
                        </div>
                        <div class="prop-item">
                            <div class="prop-item-name">{{ $t('message.text.gridColor') }}</div>
                            <div>
                                <jvs-color-picker pickerType="chrome" :color="option.gridColor"
                                    @changeData="gridColorChange"></jvs-color-picker>
                            </div>
                        </div>
                    </template>
                    <template v-if="selections.mode == 1">
                        <div class="pen-type-box">
                            <div class="pen-type-item" :class="[penType == 'text' && 'pen-type-item-active']"
                                @click="changeType('text')">{{ $t('message.text.text') }}</div>
                            <div class="pen-type-item" :class="[penType == 'pen' && 'pen-type-item-active']"
                                @click="changeType('pen')">{{ $t('message.text.graphical') }}</div>
                        </div>
                        <template v-if="penType == 'text'">
                            <div class="prop-item">
                                <div class="prop-item-name">{{ $t('message.text.font') }}</div>
                                <div>
                                </div>
                            </div>
                            <div class="prop-item prop-50-item">
                                <div class="prop-item-right">
                                    <el-input-number style="width:100%;" v-model="option.fontSize" :precision="2"
                                        :min="1" size="small" controls-position="right" @input="fontSizeChange"
                                        @change="fontSizeChange" />
                                </div>
                                <div class="prop-item-border-box">
                                    <div class="align-box" @click="doAction('textAlign', 'left')"
                                        :class="[option.textAlign == 'left' && 'align-box-active']">
                                        <i class="align-icon knowledge-iconfont keowledge-zuoduiqi1"></i>
                                    </div>
                                    <div class="align-box" @click="doAction('textAlign', 'center')"
                                        :class="[(option.textAlign == 'center' || !option.textAlign) && 'align-box-active']">
                                        <i class="align-icon knowledge-iconfont keowledge-juzhong"></i>
                                    </div>
                                    <div class="align-box" @click="doAction('textAlign', 'right')"
                                        :class="[option.textAlign == 'right' && 'align-box-active']">
                                        <i class="align-icon knowledge-iconfont keowledge-youduiqi"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="prop-item">
                                <div class="prop-item-name">{{ $t('message.text.fontColor') }}</div>
                                <div>
                                    <jvs-color-picker pickerType="chrome" :color="option.textColor"
                                        @changeData="textColorChange"></jvs-color-picker>
                                </div>
                            </div>
                            <div class="prop-item">
                                <div class="prop-item-name">
                                    <svg class="check-icon" @click="changeEllisis">
                                        <use
                                            v-bind:xlink:href="`#${option.ellipsis ? 'keowledge-a-zu3739' : 'keowledge-a-juxing2862biankuang'}`">
                                        </use>
                                    </svg>
                                    <span>{{ $t('message.text.exceedingOmission') }}</span>
                                </div>
                                <div></div>
                            </div>
                            <div class="prop-item">
                                <div class="prop-item-name">
                                    <svg class="check-icon" @click="changeHiddenText">
                                        <use
                                            v-bind:xlink:href="`#${option.hiddenText ? 'keowledge-a-zu3739' : 'keowledge-a-juxing2862biankuang'}`">
                                        </use>
                                    </svg>
                                    <span>{{ $t('message.text.hiddenText') }}</span>
                                </div>
                                <div></div>
                            </div>
                        </template>
                        <template v-if="penType == 'pen'">
                            <div class="prop-item prop-item-colu" v-if="!option.isRuleLine">
                                <div class="prop-item-name">{{ $t('message.text.size') }}</div>
                                <div class="prop-colu-body">
                                    <div class="item">
                                        <span class="title">{{ $t('message.text.height') }}</span>
                                        <el-input-number style="width:100%;" :precision="2" @change="changeH"
                                            @input="changeH" v-model="option.height" size="small"
                                            controls-position="right" />
                                    </div>
                                    <div class="item">
                                        <span class="title">{{ $t('message.text.width') }}</span>
                                        <el-input-number style="width:100%;" :precision="2" @change="changeW"
                                            @input="changeW" v-model="option.width" size="small"
                                            controls-position="right" />
                                    </div>
                                    <div class="item">
                                        <svg class="check-icon" @click="changeRatio">
                                            <use
                                                v-bind:xlink:href="`#${option.ratio ? 'keowledge-a-zu3739' : 'keowledge-a-juxing2862biankuang'}`">
                                            </use>
                                        </svg>
                                        <span class="title">{{ $t('message.text.lockAspectRatio') }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="line" v-if="!option.isRuleLine"></div>
                            <div class="prop-item prop-item-colu">
                                <div class="prop-item-name">{{ $t('message.text.position') }}</div>
                                <div class="prop-colu-body">
                                    <div class="item">
                                        <span class="title">{{ $t('message.text.xAxis') }}</span>
                                        <el-input-number style="width:100%;" @change="changeX" @input="changeX"
                                            :precision="2" v-model="option.x" size="small" controls-position="right" />
                                    </div>
                                    <div class="item">
                                        <span class="title">{{ $t('message.text.yAxis') }}</span>
                                        <el-input-number style="width:100%;" @change="changeY" @input="changeY"
                                            :precision="2" v-model="option.y" size="small" controls-position="right" />
                                    </div>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="prop-item">
                                <div class="prop-item-name">{{ $t('message.text.rotate') }}</div>
                                <div class="prop-item-right prop-item-right-50">
                                    <el-input-number style="width:100%;" :precision="2" v-model="option.rotate"
                                        @input="changeRotate" @change="changeRotate" size="small"
                                        controls-position="right" />
                                </div>
                            </div>
                            <div class="prop-item prop-50-item">
                                <div class="prop-item-border-box prop-item-cur"
                                    :class="[option.flipX && 'prop-item-cur-active']" @click="changeFlipX">
                                    {{ $t('message.text.filpHorizontal') }}</div>
                                <div class="prop-item-border-box prop-item-cur"
                                    :class="[option.flipY && 'prop-item-cur-active']" @click="changeFlipY">
                                    {{ $t('message.text.filpVertical') }}</div>
                            </div>
                            <div class="line"></div>
                            <div class="prop-item">
                                <div class="prop-item-name">{{ $t('message.text.fill') }}</div>
                                <div>
                                    <jvs-color-picker pickerType="chrome" :color="option.background"
                                        @changeData="penBackColorChange"></jvs-color-picker>
                                </div>
                            </div>
                            <div class="prop-item">
                                <div class="prop-name-action">
                                    <span class="prop-item-name">{{ $t('message.text.transparency') }}</span>
                                    <el-slider v-model="globalAlphaVal" size="small" :show-tooltip="false"
                                        @input="handleChange" />
                                </div>
                                <div class="prop-item-right">
                                    <el-input-number style="width:100%;" v-model="option.globalAlpha"
                                        @change="alphaChange" @input="alphaChange" :min="0" :step="0.1" :max="1"
                                        size="small" controls-position="right" />
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="prop-item">
                                <div class="prop-item-name">{{ $t('message.text.line') }}</div>
                                <div>
                                    <jvs-color-picker pickerType="chrome" :color="option.color"
                                        @changeData="lineColorChange"></jvs-color-picker>
                                </div>
                            </div>
                            <div class="prop-item prop-50-item">
                                <el-select v-model="lineDash" size="small" @change="lineChange">
                                    <el-option v-for="(item, index) in lineStyle" :key="index" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                                <div class="prop-item-right prop-item-right-50">
                                    <el-input-number style="width:100%;" :precision="2" v-model="option.lineWidth"
                                        @input="lineWidthChange" @change="lineWidthChange" size="small"
                                        controls-position="right" />
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    watch,
    onMounted,
} from 'vue'

import { useSelection } from '@/hooks/useSelection';
import { useHookI18n } from '@/hooks/i18n'
const { $t } = useHookI18n()
const { selections } = useSelection();

const emit = defineEmits([""])

const propStyleRef = ref()
const option = ref({
    gridSize: 20,
    fontSize: 12,
    lineDash: ''
})
const lineDash = ref('0,0')
const lineStyle = [{
    label: $t('message.text.solidLine'),
    value: '0,0'
}, {
    label: $t('message.text.dashedLine'),
    value: '5,5'
}, {
    label: $t('message.text.dotHorizontalLine'),
    value: '10,10,2,10'
}]
const lineDashs = {
    '0,0': [0, 0],
    '5,5': [5, 5],
    '10,10,2,10': [10, 10, 2, 10]
}
const penType = ref('text')
const globalAlphaVal = ref(0)
const ratioVal = ref(0)
const ratioChange = ref(false)
const changeOptionType = ref('')
watch(() => selections, (newV, oldV) => {
    if (newV.mode == 1) {
        option.value = newV.pen || {}
        if (option.value.lineDash) {
            lineDash.value = option.value.lineDash.join(",")
        } else {
            lineDash.value = '0,0'
        }
        ratioVal.value = (option.value.width / option.value.height).toFixed(2)
        if (!changeOptionType.value) {
            if (!option.value.globalAlpha && option.value.globalAlpha != 0) option.value.globalAlpha = 1
            globalAlphaVal.value = option.value.globalAlpha * 100
        } else {
            option.value.globalAlpha = globalAlphaVal.value / 100
        }
    } else {
        option.value = meta2d.getOptions()
    }
}, { deep: true })
watch(() => option.value, (newV, oldV) => {
    if (selections.mode == 0 && Object.prototype.toString.call(window.meta2d) == '[object Object]') {
        window.meta2d.setOptions(newV);
        window.meta2d?.render();
    }
}, { deep: true })
onMounted(() => {
    option.value = selections.pen || {}
})
function changeType(type: string) {
    penType.value = type
}
function handleChange() {
    option.value.globalAlpha = globalAlphaVal.value / 100
    doAction('globalAlpha', option.value.globalAlpha)
}
function alphaChange(val) {
    globalAlphaVal.value = val * 100
    doAction('globalAlpha', option.value.globalAlpha)
}
function init() {
    option.value = meta2d.getOptions()
}
// 修改画布背景颜色
function backGroundChange(val) {
    option.value.background = val
}
// 修改网格颜色
function gridColorChange(val) {
    option.value.gridColor = val
}
// 显示网格
function changeGrid() {
    option.value.grid = !option.value.grid
}
// 显示标尺
function changeRule() {
    option.value.rule = !option.value.rule
}
// 文字大小
function fontSizeChange(val) {
    doAction('fontSize', val)
}
// 文字颜色
function textColorChange(val) {
    doAction('textColor', val)
}
// 超出省略
function changeEllisis() {
    option.value.ellipsis = !option.value.ellipsis
    doAction('ellipsis', option.value.ellipsis)
}
// 隐藏文字
function changeHiddenText() {
    option.value.hiddenText = !option.value.hiddenText
    doAction('hiddenText', option.value.hiddenText)
}
// 水平翻转
function changeFlipX() {
    option.value.flipX = !option.value.flipX
    doAction('flipX', option.value.flipX)
}
// 垂直翻转
function changeFlipY() {
    option.value.flipY = !option.value.flipY
    doAction('flipY', option.value.flipY)
}
// 修改旋转
function changeRotate(val) {
    doAction('rotate', val)
}
// 图的背景填充
function penBackColorChange(val) {
    doAction('background', val)
}
// 修改线条颜色
function lineColorChange(val) {
    doAction('color', val)
}
// 修改线条粗细
function lineWidthChange(val) {
    doAction('lineWidth', val)
}
// 修改线条
function lineChange() {
    doAction('line', lineDash.value)
}
// 修改宽高比
function changeRatio() {
    option.value.ratio = !option.value.ratio
    ratioVal.value = (option.value.width / option.value.height).toFixed(2)
    doAction('ratio', option.value.ratio)
}
function changeX(val) {
    doAction('x', val)
}
function changeY(val) {
    doAction('y', val)
}
function changeW(val) {
    if (ratioChange.value) return
    let t = 1
    if (val < option.value.width) {
        t *= -1
    }
    if (option.value.ratio) {
        ratioChange.value = true
        doAction('height', option.value.height + parseFloat(ratioVal.value) * t)
    }
    doAction('width', val)
    setTimeout(() => {
        ratioChange.value = false
    })
}
function changeH(val) {
    if (ratioChange.value) return
    let t = 1
    if (val < option.value.height) {
        t *= -1
    }
    if (option.value.ratio) {
        ratioChange.value = true
        doAction('width', option.value.width + parseFloat(ratioVal.value) * t)
    }
    doAction('height', val)
    setTimeout(() => {
        ratioChange.value = false
    })
}
function doAction(prop, val) {
    const v: any = { id: selections.pen.id };
    option.value[prop] = val
    v[prop] = option.value[prop]
    if (prop === 'line') {
        v.lineDash = lineDashs[v[prop]];
    }
    meta2d.setValue(v, { render: true });
}
// 修改值
function changeOption(type) {
    changeOptionType.value = type
    option.value.width += 1
}
defineExpose({
    init,
    changeOption
})
</script>
<style lang="scss" scoped>
.prop-style-com {
    background-color: #fff;
    width: 240px;
    user-select: none;

    .prop-style-title {
        font-size: 16px;
        color: #363B4C;
        padding: 12px 16px;
        @include SourceHanSansCN-Bold;
    }

    .prop-style-body {
        height: calc(100% - 50px);

        .prop-scroll-body {
            padding: 0px 16px;
        }

        .prop-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 24px;

            .prop-item-name {
                height: 24px;
                font-size: 14px;
                color: #363B4C;
                display: flex;
                align-items: center;

                .check-icon {
                    margin-right: 4px;
                }

                span {
                    font-size: 14px;
                    color: #363B4C;
                }
            }

            .prop-item-right {
                width: 72px;

                ::v-deep(.el-input__wrapper) {
                    height: 24px !important;
                    padding-left: 8px !important;
                    padding-right: 24px !important;

                    .el-input__inner {
                        text-align: left;
                        line-height: inherit !important;
                    }
                }
            }

            .prop-item-right-50 {
                width: 50%;
            }

            .prop-name-action {
                display: flex;
                align-items: center;
                margin-right: 8px;
                flex: 1;

                span {
                    width: 46px;
                    min-width: 46px;
                    margin-right: 4px;
                }

                ::v-deep(.el-slider__runway) {
                    height: 4px !important;

                    .el-slider__bar {
                        height: 4px !important;
                    }

                    .el-slider__button-wrapper {
                        height: 24px !important;
                        width: 24px !important;
                        top: -12px !important;
                    }

                    .el-slider__button {
                        width: 12px !important;
                        height: 12px !important;
                        box-shadow: 0px 0px 2px 0px rgba(54, 59, 76, 0.15) !important;
                        border: 1px solid #C2C5CF !important;
                    }
                }
            }
        }

        .prop-item-colu {
            flex-direction: column;
            align-items: flex-start;

            .prop-colu-body {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-column-gap: 10px;
                grid-row-gap: 10px;
                margin-top: 8px;

                .item {
                    height: 24px;
                    display: flex;
                    align-items: center;

                    .check-icon {
                        width: 14px !important;
                        height: 14px !important;
                        cursor: pointer;
                        margin-right: 4px;
                    }

                    .title {
                        font-size: 12px;
                        color: #6F7588;
                        min-width: 28px;
                    }

                    ::v-deep(.el-input__wrapper) {
                        height: 24px !important;
                        padding-left: 8px !important;
                        padding-right: 24px !important;

                        .el-input__inner {
                            text-align: left;
                            line-height: inherit !important;
                        }
                    }
                }
            }
        }

        .prop-50-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 8px;

            .prop-item-right {
                width: 100%;
            }
        }

        .prop-item-border-box {
            border: 1px solid #eeeff0;
            border-radius: 4px;
            overflow: hidden;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 12px;
            color: #363B4C;

            .align-box {
                width: 32px;
                height: 22px;
                border-radius: 3px;
                display: flex;
                align-items: center;
                justify-content: center;

                .align-icon {
                    color: #363B4C;
                    font-size: 16px;
                    // width: 16px;
                    // height: 16px;
                    cursor: pointer;
                }

                &:hover {
                    background: #F5F6F7;
                }
            }

            .align-box-active {
                background-color: #DDEAFF;

                .align-icon {
                    color: #1E6FFF;
                }
            }
        }

        .prop-item-cur {
            cursor: pointer;
        }

        .prop-item-cur-active {
            background: #DDEAFF;
            color: #1E6FFF;
        }

        .check-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .prop-item+.prop-item {
            margin-top: 12px;
        }

        .line {
            height: 1px;
            background: #EEEFF0;
            width: 100%;
            margin: 16px 0px;
        }

        .pen-type-box {
            background-color: #fff;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eeeff0;
            box-sizing: border-box;
            margin-bottom: 16px;

            .pen-type-item {
                height: 32px;
                color: #6F7588;
                font-size: 14px;
                cursor: pointer;

                &:hover {
                    color: #363B4C;
                }
            }

            .pen-type-item-active {
                position: relative;
                color: #363B4C;

                &:after {
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0px;
                    width: 100%;
                    height: 2px;
                    background-color: #363B4C;
                }
            }

            .pen-type-item+.pen-type-item {
                margin-left: 32px;
            }
        }
    }
}
</style>